<template>
    <div>
        等级名称<input type="text" v-model="que.djmc"> 
       权益名称 <input type="text"v-model="que.qymc">-

     <input type="button" value="查询" @click="add">

     <a href="/djadd">等级添加</a>
     <tr></tr>

     <a href="/hyxs">会员表</a>
     <tr></tr>

     <a href="/qyxs">权益表</a>

        <table class="table">
            <thead>
                <tr>
                    <td>等级名称</td>
                    <td>权益名称</td>
             
                    <td>等级状态</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="m in data">
                    <td>{{m.djmc}}</td>
                    <td>{{m.qymc}}</td>      
                    <td>{{m.djzt?"启用":"禁用"}}</td>
                    <td>
                        <input type="button"  value="权益分配" @click="jiny(m.djid)">
                        <input type="button" value="禁用" @click="jiny(m.djid)">

                    </td>
                </tr>
            </tbody>
        </table>
        <input type="button" value="首页" @click="page(1)">
        <input type="button" value="上一页" @click="page(2)">
        <input type="button" value="下一页" @click="page(3)">
        <input type="button" value="尾页" @click="page(4)">
         <select v-model="yrl" @change="trl">
            <option value="3">每页3条</option>
            <option value="4">每页4条</option>
            <option value="5">每页5条</option>
         </select>
         <input type="number" v-model="tz"> 
        <input type="button" value="跳转" @click="tzs">
         



        
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref,onMounted } from 'vue';
import { useRouter } from 'vue-router';

const stro=useRouter();



const yrl =ref(3)
const tz=ref();
const tzs=()=>{
    que.value.index=tz.value
    add();
}

const trl =()=>{
    que.value.page=yrl.value
    add();
}

const data=ref([{
    "djid": 0,
  "djmc": "",
  "qymc": "",
  "djzt": true
}])
 

const page=(a:any)=>{
    if(a==1){
        que.value.index=1;
        add();
    }
    if(a==2){
        if(que.value.index>1){
            que.value.index-=1;
            add();
        }
   
    }
    if(a==3){
        if(que.value.index<quer.value.plist){
            que.value.index+=1;
        add();
        }
     
    }
    if(a==4){
        que.value.index=quer.value.plist;
        add();
    }
}

const que =ref({
    index:1,
    page:3,
    djmc:"",
    qymc:"",
})

const quer = ref({
    count:0,
    plist:0,
})
onMounted(()=>{
    add();
})
 const add=()=>{
    axios.get("https://localhost:7267/api/dj/hyxs",{params:que.value}).then(res=>{
        data.value=res.data.plist

        quer.value.count=res.data.count;
        quer.value.plist =Math.ceil(quer.value.count/que.value.page)
    })
 }
 const jiny=(a:any)=>{
    axios.get("https://localhost:7267/api/dj/xg",{params:{id:a}}).then(res=>{
        if(res.data>0){
            alert("修改成功");
            add();
        }else{
            alert("修改失败")
        }
    })
 }

</script>

<style scoped>

</style>